<%--
  Created by IntelliJ IDEA.
  User: Helen
  Date: 2019/10/23
  Time: 9:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>开始使用layui</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript">
        layui.use(['table',"jquery","layer","form"],function () {
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.jquery;

            table.render({
                elem: '#stuTable'
                ,url: 'selectAll.do'
                ,toolbar: '#toolbar'
                ,page: true
                ,cols: [
                    [
                        {title:"序号",type:"numbers"}
                        ,{type:"checkbox" ,align:"center"}
                        ,{field: 'stuName', title: '学生姓名', width:80, sort: true,align:"center"}
                        ,{field: 'stuAge', title: '学生年龄', width:280,align:"center"}
                        ,{field: 'stuGender', title: '学生性别', templet:"#genderTemp"}
                        ,{title:"操作",templet:"#butt"}
                    ]

                ]
            });

            //监控工具栏事件
            table.on("toolbar(myTableFilter)",function (obj) {
                switch (obj.event) {
                    case 'add':
                        /*0就是说明 准备添加*/
                        $("#type").val("0");
                        layerIndex=layer.open({type:1, content: $("#updateForm")});
                        console.log(data);
                        break;

                    case 'search':

                        var name = $("#searchName").val();
                        //alert(name)
                        table.reload("stuTable",{
                            "where":{"stuName":name}
                        });
                        break;

                    case 'deleteSome':
                        var selectedRows = table.checkStatus("stuTable");
                        console.log(selectedRows);
                        if(selectedRows.data.length == 0){
                            layer.msg('请选中要删除的行', {icon: 1});
                        }else {
                            layer.confirm('确定删除？',{title:'警告',icon:3},function (index) {
                                layer.close(index);
                                var ids = new Array();
                                console.log(selectedRows.data)
                                $.each(selectedRows.data,function (index,obj1) {
                                    console.log(obj1)
                                    ids[index] = obj1.stuId;
                                });
                                console.log(ids);
                                $.ajax({
                                    url:"deleteSome.do",
                                    data:"idCollection=" + ids,
                                    type:"post",
                                    success:function (data) {
                                        if(data.delete){

                                            layer.msg('删除成功', {icon: 6});
                                            table.reload("stuTable");
                                        }else {
                                            layer.msg('删除失败', {icon: 1});
                                        }
                                    }

                                })
                            })
                        }
                }
            });


            var layerIndex = 0;

            table.on("tool(myTableFilter)",function (obj) {
                var data = obj.data;
              //  alert(data.stuId)
               // console.log(data);
                switch (obj.event) {
                    case 'edit':
                        $("#stuId").val(data.stuId);
                        $("#stuName").val(data.stuName);
                        $("#stuAge").val(data.stuAge);

                        /*1就是说明 准备update*/
                        $("#type").val("1");

                        if(data.stuGender == 1){
                            $("#man").prop("checked",true);
                        }else {
                            $("#woman").prop("checked",true);
                        }
                        form.render(); //刷新渲染表格


                        layerIndex=layer.open({type:1, content: $("#updateForm")});
                        break;
                    case 'delete':
                        var ids = data.stuId;
                        //alert(ids)
                        layer.confirm('are u sure?',{title:"警告",icon:3},function (index) {
                            layer.close(index);
                            $.ajax({
                                url:"deleteSome.do",
                                data:"idCollection=" + ids,
                                type:"post",
                                success:function (data) {
                                    if(data.delete){

                                        layer.msg('删除成功', {icon: 6});
                                         //删除成功需要刷新stuTable
                                        table.reload("stuTable");
                                    }else {
                                        layer.msg('删除失败', {icon: 1});
                                    }
                                }
                            })
                        })
                }
            });


            form.on("submit(changeFilter)",function (obj) {
                layer.close(layerIndex);
                // console.log(obj);
                // console.log(sendUrl);
                var ajaxUrl = "updateStu.do";
              //  alert($("#type").val());
                if($("#type").val() == 0){
                    ajaxUrl = "insertStu.do";
                }
                $.ajax({
                    url:ajaxUrl,
                    data:obj.field,
                    type:"post",
                    success:function (data) {
                        if(data.insert){
                            layer.msg('操作成功', {icon: 6});
                            table.reload("stuTable");
                        }else {
                            layer.msg('操作失败', {icon: 2});
                        }
                    }
                })

                /* $("#id").val("");
                 $("#name").val("");
                 $("#upTime").val("");*/
                $("#updateForm")[0].reset();

                return false;
            });




        })
    </script>

    <script id="genderTemp" type="text/html">
        {{#  if(d.stuGender == 1){ }}
        男生
        {{#  } else { }}
        女生
        {{#  } }}
    </script>

    <script id="butt" type="text/html">
        <button type="button" class="layui-btn" lay-event="edit">修改</button>
        <button type="button" class="layui-btn" lay-event="delete">删除</button>
    </script>


</head>
<body>
    <table id="stuTable" lay-filter="myTableFilter"></table>


    <%--头部--%>
    <script type="text/html" id="toolbar">

        <div class="layui-btn-container layui-inline" >
            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
            <button class="layui-btn layui-btn-sm" lay-event="deleteSome">删除选中</button>
        </div>

        <div class="layui-inline">

            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline" style="width: 200px;">
                <input type="text" id="searchName" name="name" placeholder="关键字" class="layui-input">
            </div>

            <div class="layui-input-inline" style="width: 100px;">
                <%--<input type="button" class="layui-btn layui-btn-normal" onclick="doSearch()" value="搜索">--%>
                <input type="button" class="layui-btn layui-btn-normal" lay-event="search" value="搜索">
            </div>
        </div>

    </script>


    <%--修改的表单--%>
    <form class="layui-form" id="updateForm" style="display:none;">
        <input name="stuId" id="stuId" type="hidden"/>
        <input name="type" id="type" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="stuName" id="stuName" required  lay-verify="required" placeholder="姓名" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-block">
                <input type="text" name="stuAge" id="stuAge" required  lay-verify="required" placeholder="年龄" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="stuGender" value="1" id="man" title="男" >
                <input type="radio" name="stuGender" value="0" id="woman" title="女">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button lay-submit  lay-filter="changeFilter" class="layui-btn layui-btn-primary">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>


</body>
</html>
